<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纸张阴影 | 辅助类</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/util_paper.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		body {background: #f0f0f0;}
		.u-paper {display:inline-block; margin: 10px; vertical-align: top;}
		.depth > .u-paper {width: 150px; line-height: 100px; margin: 20px; text-align: center;}

		.demo {width: 180px; padding: 0 2em 1em; text-align: center;}
		.power {padding: 5px 0; font-size: 30px;}
		.power > small {font-size: .5em;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>纸张阴影</dd>
			<dt>描述：</dt>
			<dd>生成不同阴影深度的纸张效果，呈现突出效果。注：为达到理想效果，需要搭配页面背景色。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>util_paper.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<pre>depth=[value] - value {number} 1-4</pre>
		<div class="depth">
			<div class="u-paper" depth="1">阴影深度：1</div>
			<div class="u-paper" depth="2">阴影深度：2</div>
			<div class="u-paper" depth="3">阴影深度：3</div>
			<div class="u-paper" depth="4">阴影深度：4</div>
		</div>
		<hr>
		<h4>应用示例：</h4>
		<div class="u-paper demo" depth="3">
			<div class="power">
				<code>1,000</code>
				<small>kWh</small>
			</div>
			<p>日发电量</p>
		</div>
		<div class="u-paper demo" depth="3">
			<div class="power">
				<code>$200</code>
			</div>
			<p>日均收入</p>
		</div>
		<div class="u-paper demo" depth="1">
			<img src="../demo-lib/demo_img.png">
		</div>
	</div>
</body>
</html>
